Animation Bus 🚌
Define different animation stops relative to another value.
Install
yarn add animation-bus
npm install animation-bus --save
<script src="https://unpkg.com/animation-bus/dist/animation-bus.js"></script>
(UMD library exposed as `AnimationBus`)
Example
import AnimationBus from 'animation-bus'
const scrollElements = document.querySelectorAll('[data-scroll-bus]')
const windowFactor = 0.5
const elementFactor = 0.5
let isTicking = false
let scrollTop, scrollBottom
const animations = [{
name: 'scale',
stops: [
[-300, 0.25],
[0, 1],
[300, 0.25]
]
}, {
name: 'translateY',
stops: [
[0, 0],
[300, 100]
]
}, {
name: 'opacity',
stops: [
[-300, 0],
[0, 1],
[300, 0]
]
}]
const origin = (element) => {
const windowOffset = window.innerHeight * windowFactor
const elementOffset = element.offsetHeight * elementFactor
return scrollTop + windowOffset - elementOffset - element.offsetTop
}
const animationBus = new AnimationBus(animations, origin)
function scrollHandler() {
for (let i = 0; i < scrollElements.length; i++) {
animationBus.applyStyles(scrollElements[i])
}
isTicking = false
}
window.addEventListener('scroll', function () {
scrollTop = pageYOffset
if (!isTicking) {
window.requestAnimationFrame(scrollHandler)
}
isTicking = true
}, false);